<template>
    <el-tabs v-model="activeName" type="border-card" style="margin: 10px;" @tab-click="handleClick" >
      <el-tab-pane label="商品品牌" name="PpProduct">
        <PpProduct ref="PpProduct"></PpProduct>
      </el-tab-pane>
      <el-tab-pane label="商品型号" name="XlProduct">
        <XlProduct ref="XlProduct"></XlProduct>
      </el-tab-pane>
      <el-tab-pane label="商品分类" name="TypeProduct">
        <TypeProduct ref="TypeProduct"></TypeProduct>
      </el-tab-pane>
      <el-tab-pane label="商品单位" name="DwProduct">
        <DwProduct ref="DwProduct"></DwProduct>
      </el-tab-pane>
      <el-tab-pane label="商品成色" name="csProduct">
        <csProduct ref="csProduct"></csProduct>
      </el-tab-pane>
      
    </el-tabs>
</template>

<script>
import DwProduct from "./comps/dwProduct.vue";
import PpProduct from "./comps/ppProduct.vue";
import TypeProduct from "./comps/typeProduct.vue";
import XlProduct from "./comps/xlProduct.vue";
import csProduct from "./comps/csProduct.vue";

export default {
  components: {
    XlProduct,
    TypeProduct,
    DwProduct,
    PpProduct,
    csProduct
  },
  data() {
    return {
      activeName: "XlProduct",
    };
  },
  methods:{
    handleClick(tab){
      this.$refs[tab.name].success()
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
